<template>
  <div class="form-list">
    <div class="form-list-header">
      <div class="form-list-header-title">
        <span class="back"
              @click="naviBack"
              v-if="showBack">
          <svg-icon icon-class="back" />
        </span>
        <slot name="title"></slot>
      </div>
      <div class="form-list-header-actions">
        <slot name="actions"></slot>
      </div>
    </div>
    <div class="form-list-body"
         :class="showFoot?'show-foot':''">
      <slot></slot>
    </div>
    <div class="form-list-foot"
         v-if="showFoot">
      <slot name="foot"></slot>
    </div>
  </div>
</template>
<script>
import { default as apiList } from '@/apis/list';
import moment from 'moment';
export default {
    name: 'form-list',
    props: {
        showBack: {
            type: Boolean,
            default: true,
        },
        showFoot: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            pageSize: 5,
            pageNum: 1,
            list: {},
            workItemForm: {
                name: '',
            },
            dialogVisible: false,
            moment: moment,
            search: '',
        };
    },
    mounted() {
        this.moment.locale('zh-cn');
    },
    methods: {
        ...apiList,
        naviBack: function () {
            this.$router.go(-1);
        },
    },
};
</script>

<style scoped lang="scss">
@import '@/assets/dark.scss';

.form-list {
    width: 100%;
    height: 100%;

    $topHeight: 70px; //修改标题栏高度
    $footHeight: 40px; //修改底部栏高度

    background-color: #1b232e;

    &-header {
        height: $topHeight;
        width: 100%;
        padding: 0px 20px;
        padding-top: 15px;
        box-sizing: border-box;
        border-bottom: solid 1px $backColorHover3;

        div {
            // vertical-align: middle;
        }
        // .xgwdput {
        //     white-space: nowrap;
        //     overflow: hidden;
        //     text-overflow: ellipsis;
        // }
        &-actions {
            margin-left: 200px;
            display: block;
            text-align: right;
            font: {
                size: 20px;
                weight: bold;
            }
            color: #409eff;
            .search {
                .el-input {
                    background-color: $backColorHover;
                    border-radius: 4px;
                }
            }
        }
        &-title {
            color: white;
            width: 200px;
            text-align: left;
            user-select: none;
            float: left;

            .back {
                display: inline-block;
                vertical-align: middle;
                cursor: pointer;
                svg {
                    height: 35px;
                    width: 35px;
                    font-size: 28px;
                }
            }
        }
    }
    &-body {
        height: calc(100vh - $topHeight);
        box-sizing: border-box;
        background-color: #1b232e;
        overflow-y: auto;
        &.show-foot {
            height: calc(100vh - $topHeight - $footHeight);
        }
    }
    &-foot {
        text-align: center;
        height: $footHeight;
    }
}
</style>
<style lang="scss">
@import '@/assets/dark.scss';

.el-table div {
    background-color: initial;
}
.el-table tr {
    background-color: $backColor; //表格数据背景色
    transition: none; //禁用动画，否则鼠标移动会出现白色
}
.el-table th.el-table__cell {
    background-color: $backColor; //表头背景色
    transition: none; //禁用动画，否则鼠标移动会出现白色
}
.cellClass {
    color: $fontColor;
    background-color: $backColor;
    cursor: pointer;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background-color: $backColorHover; //鼠标放到行上的颜色
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom: 1px $backColorHover; //表头，表行表格线颜色
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
    border-bottom: 1px $backColorHover; //表格Table底线颜色
    background-color: $backColorHover;
}
.el-table .el-table__empty-block    //无数据时的颜色
{
    background-color: $backColor;
    .el-table__empty-text {
        color: $fontColor;
    }
}
//搜索框样式
.el-input__inner,
.el-range-input,
.el-checkbox__inner {
    background-color: initial;
    border-color: $backColorHover;
    color: $fontColor;
}
.el-checkbox__inner,
.el-radio__inner {
    border-color: $backColorHover3;
    background-color: $backColorHover;
}

// 下拉样式
.el-dropdown-menu {
    padding-top: 0px;
    padding-bottom: 0px;
    border: solid 1px $backColor2; //下拉菜单边框颜色
}
.el-popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: $backColor2; //下拉菜单箭头颜色
}

.el-dropdown-menu__item,
.el-dropdown-link {
    color: $fontColor; //下拉菜单字体颜色
}
.el-dropdown-menu__item {
    background-color: $backColor3;
}
.el-dropdown-menu__item--divided {
    margin-top: 0px !important;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #212a39;
    color: #ecf5ff; //下拉组件选项鼠标hover 颜色
}
.el-dropdown-menu__item--divided:before {
    background: initial; //下拉组件分割线颜色
}

.el-popper[x-placement^='bottom'] .popper__arrow::after {
    //下拉框提示符颜色
    border-bottom-color: $backColor2;
}
.el-card__body,
.el-main {
    // padding: 20px;
    background-color: #37414f;
}

//分页组件样式
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background-color: transparent;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: white !important;
}

//弹出组件颜色
.el-dialog__header {
    background-color: $backColorHover;
    .el-dialog__title {
        color: $fontColor;
    }
    .el-dialog__headerbtn .el-dialog__close {
        color: $fontColor;
    }
}
.el-dialog__body {
    background-color: $backColorHover;
    color: $fontColor;
    .el-input,
    .el-textarea .el-textarea__inner {
        border-radius: 4px;
        border-color: $backColorHover;
        background-color: $backColorHover2;
    }
}
.el-dialog__footer {
    background-color: $backColorHover;
}
</style>